<headBox></headBox>
<div *ngIf='this.mask' class="mask"></div>
<div class="container-fluid row" [ngStyle]="currentStyles">
  <div class="sidebar">
    <app-treeview></app-treeview>

  </div>

  <div class="main">
    <div class="roles">
      <h3 class="title">角色管理</h3>

      <div class="table-responsive device">
        <div class="btnBox">角色列表
          <!--<button  class="btn btn-info" (click)="this.add=!this.add">{{this.add?'取消添加':'添加角色'}}</button>-->
          <button *ngIf="rolePower.add" class="btn btn-lg btn-info" (click)="this.add=!this.add;this.mask=!this.mask"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>{{this.add?'取消添加':'添加角色'}}</button>
        </div>

        <div class="panel panel-default">
          <ul class="list-group">
            <li class="list-group-item borderBN rolesListT"> <div>角色名称</div> <div class="permission">权限</div> <div>备注</div> <div>操作</div> </li>
          </ul>
          <ul class="list-group rolesListC">
            <li class="list-group-item"  *ngFor="let list of roleList">
              <div>{{list.roleName}}</div>
              <div class="permission">
                <p *ngFor="let sub of list.permission">
                  {{sub.functionId=='1001'?'客户管理：':''}}
                  {{sub.functionId=='1002'?'设备管理：':''}}
                  {{sub.functionId=='1003'?'角色管理：':''}}
                  {{sub.functionId=='1004'?'子账户管理：':''}}
                  {{sub.functionId=='1005'?'日志管理：':''}}
                  {{sub.functionId=='1006'?'分组管理：':''}}
                  <b>
                    {{sub.permission.add?'添加':''}}
                    {{sub.permission.edit?'编辑':''}}
                    {{sub.permission.authorize?'授权':''}}
                    {{sub.permission.share?'分享':''}}
                    {{sub.permission.lookup?'查看':''}}
                    {{sub.permission.delete?'删除':''}}
                    {{sub.permission.export?'导出':''}}
                    {{sub.permission.forbidden?'禁用':''}}
                    {{sub.permission.active?'启用':''}}
                    {{sub.permission.log?'日志':''}}
                  </b>
                </p>
              </div>
              <div >{{list.description}}</div>
              <div>
                <input *ngIf="rolePower.delete" class="btn btn-danger btn-xs" type="button" value="删除" (click)="delet(list.roleId)">
                <input *ngIf="rolePower.edit" class="btn btn-success btn-xs" type="button" value="{{list.edt?'取消':'编辑'}}" (click)="getRoleInfo(list.roleId);list.edt=!list.edt;this.mask=!this.mask;edit.roleName=list.roleName;edit.description=list.description">
              </div>
              <!--角色编辑-->
              <div class="editForm" *ngIf="list.edt">
                <form #form="ngForm" (ngSubmit)="form.form.valid && editRole(form.value);list.edt=!list.edt;this.mask=false" novalidate  role="form" class="form">
                  <h3 class="formName">编辑角色 <i class="formClose" (click)="list.edt=false;this.mask=!this.mask">X</i></h3>
                  <div class="form-group ">
                    <div class="codeBox clearfix">
                      <label class="control-label"><i class="red">*</i>角色名称：</label>
                      <input required type="text" #roleName="ngModel" [(ngModel)]="edit.roleName" name="roleName" placeholder="请输入修改后的角色名称" autocomplete="off">
                      <div *ngIf='form.submitted && (!roleName.valid)' class="text-danger">角色名称不能为空</div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="clearfix">
                      <span class="pl"><i class="red">*</i>权限设置:</span>
                      <div class="pr">
                        <div *ngFor="let item of list.permission">
                          <p *ngIf="item.functionId=='1001'">客户管理:
                            <label>
                              <input type="checkbox" [checked]="item.permission.add" (click)="selectCheckbox($event.target.checked,item.functionId,'add',list.permission)"/>
                              <b>添加</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.edit" (click)="selectCheckbox($event.target.checked,item.functionId,'edit',list.permission)"/>
                              <b>编辑</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.forbidden" (click)="selectCheckbox($event.target.checked,item.functionId,'forbidden',list.permission)"/>
                              <b>禁用</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.active" (click)="selectCheckbox($event.target.checked,item.functionId,'active',list.permission)"/>
                              <b>启用</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.delete" (click)="selectCheckbox($event.target.checked,item.functionId,'delete',list.permission)"/>
                              <b>删除</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.export" (click)="selectCheckbox($event.target.checked,item.functionId,'export',list.permission)"/>
                              <b>导出</b>
                            </label>
                          </p>
                          <p *ngIf="item.functionId=='1002'"> 设备管理:
                            <label>
                              <input type="checkbox" [checked]="item.permission.authorize" (click)="selectCheckbox($event.target.checked,item.functionId,'authorize',list.permission)"/>
                              <b>授权</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.share" (click)="selectCheckbox($event.target.checked,item.functionId,'share',list.permission)"/>
                              <b>分享</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.edit"(click)="selectCheckbox($event.target.checked,item.functionId,'edit',list.permission)"/>
                              <b>编辑</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]='item.permission.active' (click)="selectCheckbox($event.target.checked,item.functionId,'active',list.permission)"/>
                              <b>启用</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]='item.permission.forbidden' (click)="selectCheckbox($event.target.checked,item.functionId,'forbidden',list.permission)"/>
                              <b>禁用</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.delete" (click)="selectCheckbox($event.target.checked,item.functionId,'delete',list.permission)"/>
                              <b>删除</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.lookup" (click)="selectCheckbox($event.target.checked,item.functionId,'lookup',list.permission)"/>
                              <b>查看</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.export" (click)="selectCheckbox($event.target.checked,item.functionId,'export',list.permission)"/>
                              <b>导出</b>
                            </label>
                          </p>
                          <p *ngIf="item.functionId=='1003'">角色管理:
                            <label>
                              <input type="checkbox" [checked]="item.permission.add" (click)="selectCheckbox($event.target.checked,item.functionId,'add',list.permission)"/>
                              <b>添加</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.edit" (click)="selectCheckbox($event.target.checked,item.functionId,'edit',list.permission)"/>
                              <b>编辑</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.delete" (click)="selectCheckbox($event.target.checked,item.functionId,'delete',list.permission)"/>
                              <b>删除</b>
                            </label>
                          </p>
                          <p *ngIf="item.functionId=='1004'">子账户管理:
                            <label>
                              <input type="checkbox" [checked]='item.permission.add' (click)="selectCheckbox($event.target.checked,item.functionId,'add',list.permission)"/>
                              <b>添加</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.edit" (click)="selectCheckbox($event.target.checked,item.functionId,'edit',list.permission)"/>
                              <b>编辑</b>
                            </label>
                            <!--<label>
                              <input type="checkbox" [checked]='item.permission.delete' (click)="selectCheckbox($event.target.checked,item.functionId,'forbidden',list.permission)"/>
                              <b>删除</b>
                            </label>-->
                            <label>
                              <input type="checkbox" [checked]='item.permission.active' (click)="selectCheckbox($event.target.checked,item.functionId,'active',list.permission)"/>
                              <b>启用</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]='item.permission.forbidden' (click)="selectCheckbox($event.target.checked,item.functionId,'forbidden',list.permission)"/>
                              <b>禁用</b>
                            </label>
                          </p>
                          <p *ngIf="item.functionId=='1005'">日志管理:
                            <label>
                              <input type="checkbox" [checked]="item.permission.log" (click)="selectCheckbox($event.target.checked,item.functionId,'log',list.permission)"/>
                              <b>日志</b>
                            </label>
                          </p>
                          <p *ngIf="item.functionId=='1006'">分组管理:
                            <label>
                              <input type="checkbox" [checked]='item.permission.add' (click)="selectCheckbox($event.target.checked,item.functionId,'add',list.permission)"/>
                              <b>添加</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.edit" (click)="selectCheckbox($event.target.checked,item.functionId,'edit',list.permission)"/>
                              <b>编辑</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]='item.permission.delete' (click)="selectCheckbox($event.target.checked,item.functionId,'delete',list.permission)"/>
                              <b>删除</b>
                            </label>
                            <label>
                              <input type="checkbox" [checked]="item.permission.lookup" (click)="selectCheckbox($event.target.checked,item.functionId,'lookup',list.permission)"/>
                              <b>查看</b>
                            </label>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-group ">
                    <div class="codeBox clearfix">
                      <label class="control-label">角色备注：</label>
                      <input type="text" #description="ngModel" [(ngModel)]="edit.description" name="description" placeholder="请输入备注" autocomplete="off">
                    </div>
                  </div>
                  <div class="form-group ">
                    <div class="codeBox clearfix">
                      <input type="button" value="取消" class="btn btn-info" (click)="list.edt=false;this.mask=!this.mask"/>
                      <input type="submit" value="提交" class="btn btn-info" [disabled]="!roleName.valid"/>
                    </div>
                  </div>
                </form>
              </div>
            </li>
          </ul>
          <!--添加角色-->
          <div class="addForm" *ngIf="this.add">
            <form #form="ngForm" (ngSubmit)="form.form.valid && createRoleList(form.value);this.add=!this.add;this.mask=false" novalidate  role="form" class="form">
              <h3 class="formName">添加角色 <i class="formClose" (click)="this.add=!this.add;this.mask=!this.mask">X</i></h3>
              <div class="form-group ">
                <div>
                  <label class="control-label"><i class="red">*</i>角色名称：</label>
                  <input required type="text" #roleName="ngModel" [(ngModel)]="roleAdd.roleName" name="roleName" placeholder="请输入角色名称" autocomplete="off">
                  <div *ngIf='form.submitted && (!roleName.valid)' class="text-danger">角色名称不能为空</div>
                </div>
              </div>
              <div class="form-group">
                <div class="clearfix">
                  <span class="pl"><i class="red">*</i>权限设置:</span>
                  <div class="pr">
                    <div *ngFor="let item of powerB">
                      <p *ngIf="item.functionId=='1001'">客户管理:
                        <label>
                          <input type="checkbox" [checked]="item.permission.add" (click)="selectCheckboxA($event.target.checked,item.functionId,'add',powerB)"/>
                          <b>添加</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.edit" (click)="selectCheckboxA($event.target.checked,item.functionId,'edit')"/>
                          <b>编辑</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.forbidden" (click)="selectCheckboxA($event.target.checked,item.functionId,'forbidden')"/>
                          <b>禁用</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.active" (click)="selectCheckboxA($event.target.checked,item.functionId,'active')"/>
                          <b>启用</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]='item.permission.delete' (click)="selectCheckboxA($event.target.checked,item.functionId,'delete')"/>
                          <b>删除</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.export" (click)="selectCheckboxA($event.target.checked,item.functionId,'export')"/>
                          <b>导出</b>
                        </label>
                      </p>
                      <p *ngIf="item.functionId=='1002'"> 设备管理:
                        <label>
                          <input type="checkbox" [checked]="item.permission.lookup" (click)="selectCheckboxA($event.target.checked,item.functionId,'lookup')"/>
                          <b>查看</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.authorize" (click)="selectCheckboxA($event.target.checked,item.functionId,'authorize')"/>
                          <b>授权</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.share" (click)="selectCheckboxA($event.target.checked,item.functionId,'share')"/>
                          <b>分享</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.edit"(click)="selectCheckboxA($event.target.checked,item.functionId,'edit')"/>
                          <b>编辑</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]='item.permission.active' (click)="selectCheckboxA($event.target.checked,item.functionId,'active')"/>
                          <b>启用</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]='item.permission.forbidden' (click)="selectCheckboxA($event.target.checked,item.functionId,'forbidden')"/>
                          <b>锁定</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]='item.permission.delete' (click)="selectCheckboxA($event.target.checked,item.functionId,'delete')"/>
                          <b>删除</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.export" (click)="selectCheckboxA($event.target.checked,item.functionId,'export')"/>
                          <b>导出</b>
                        </label>
                      </p>
                      <p *ngIf="item.functionId=='1003'">角色管理:
                        <label>
                          <input type="checkbox" [checked]='item.permission.add' (click)="selectCheckboxA($event.target.checked,item.functionId,'add')"/>
                          <b>添加</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.edit" (click)="selectCheckboxA($event.target.checked,item.functionId,'edit')"/>
                          <b>编辑</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.delete" (click)="selectCheckboxA($event.target.checked,item.functionId,'delete')"/>
                          <b>删除</b>
                        </label>
                      </p>
                      <p *ngIf="item.functionId=='1004'">子账户管理:
                        <label>
                          <input type="checkbox" [checked]="item.permission.add" (click)="selectCheckboxA($event.target.checked,item.functionId,'add')"/>
                          <b>添加</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.edit" (click)="selectCheckboxA($event.target.checked,item.functionId,'edit')"/>
                          <b>编辑</b>
                        </label>
                        <!--<label>
                          <input type="checkbox" [checked]='item.permission.delete' (click)="selectCheckboxA($event.target.checked,item.functionId,'active')"/>
                          <b>删除</b>
                        </label>-->
                        <label>
                          <input type="checkbox" [checked]='item.permission.active' (click)="selectCheckboxA($event.target.checked,item.functionId,'active')"/>
                          <b>启用</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]='item.permission.forbidden' (click)="selectCheckboxA($event.target.checked,item.functionId,'forbidden')"/>
                          <b>禁用</b>
                        </label>
                      </p>
                      <p *ngIf="item.functionId=='1006'"> 分组管理:
                        <label>
                          <input type="checkbox" [checked]="item.permission.add" (click)="selectCheckboxA($event.target.checked,item.functionId,'add')"/>
                          <b>添加</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.edit"(click)="selectCheckboxA($event.target.checked,item.functionId,'edit')"/>
                          <b>编辑</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]='item.permission.delete' (click)="selectCheckboxA($event.target.checked,item.functionId,'delete')"/>
                          <b>删除</b>
                        </label>
                        <label>
                          <input type="checkbox" [checked]="item.permission.lookup" (click)="selectCheckboxA($event.target.checked,item.functionId,'lookup')"/>
                          <b>查看</b>
                        </label>
                      </p>
                      <p *ngIf="item.functionId=='1005'">日志管理:
                        <label>
                          <input type="checkbox" [checked]="item.permission.log" (click)="selectCheckboxA($event.target.checked,item.functionId,'log')"/>
                          <b>日志</b>
                        </label>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <div class="codeBox clearfix">
                  <label class="control-label">角色备注：</label>
                  <input type="text" #description="ngModel" [(ngModel)]="roleAdd.description" name="description" placeholder="请输入备注" autocomplete="off">
                </div>
              </div>
              <div class="form-group ">
                <div class="codeBox clearfix">
                  <input type="button" value="取消" class="btn btn-info" (click)="this.add=!this.add;this.mask=!this.mask"/>
                  <input type="submit" value="提交" class="btn btn-info" [disabled]="!roleName.valid"/>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footBox></footBox>



